import { defineComponent, reactive, ref, computed } from "vue";
import Page from "@/components/public/page/page";
import { CardWithTitle } from "@/components/public/card/card";
import {
  EditOutlined,
  DeleteOutlined,
  SearchOutlined,
} from "@ant-design/icons-vue";
import LTable from "@/components/public/lTable/lTable";
import firstLevelChannelService from "@/modules/channelManagement/firstLevelChannel.service";
import firstLevelChannelPageAuth from "./customCommunicatePage.auth";
// import Add from "./popup/add/add";
import { message } from "ant-design-vue";
import {$channelResetPassword} from "@/api/channel/channel";
import useNavigator from "@/hooks/useNavigator";
export default defineComponent({
  setup() {
    const navigator = useNavigator();
    const addRef = ref(null as any);
    const state = reactive({
      toolbar: {
        left: ["refresh", "add", "output",],
        right: ["filter", "search"],
        add: {
          auth: 'one_add',
          handler: () => {
            addRef.value.open();
          }
        },
      },
      dataSource: [],
      columns: [
        {
          title: "ID",
          dataIndex: "id",
          align: "center",
          width: "100px",
        },
        {
          title: "用户名",
          dataIndex: "username",
          align: "center",
          width: "100px",
        },
        {
          title: "类型",
          dataIndex: "type",
          align: "center",
          width: "100px",
        },
        {
          title: "渠道名称",
          dataIndex: "name",
          align: "center",
          width: "180px",
        },
        {
          title: "负责人姓名",
          dataIndex: "realname",
          align: "center",
          width: "100px",
        },
        {
          title: "联系电话",
          dataIndex: "phone",
          align: "center",
          width: "100px",
        },
        {
          title: "创建时间",
          dataIndex: "create_start_time",
          align: "center",
          width: "150px",
        },
        {
          fixed: "right",
          title: "操作",
          dataIndex: "operation",
          align: "center",
        },
      ],
      loading: false,
      searchForm: {
        id: {
          type: "input",
          label: "ID",
          attrs: { placeholder: "请输入ID" },
        },
        type: {
          type: "select",
          label: "类型",
          attrs: { placeholder: "请选择类型" },
          datas: [
            { label: "出单机构", value: 1 },
            { label: "推广机构", value: 2 },
          ],
        },
        name: {
          type: "input",
          label: "渠道名称",
          attrs: { placeholder: "请输入渠道名称" },
        },
        realname: {
          type: "input",
          label: "负责人姓名",
          attrs: { placeholder: "请输入负责人姓名" },
        },
      },
      pagination: {
        total: 0,
        current: 1,
        pageSize: 10,
      },
    } as any);
    // 表格状态变更
    const tableChangeHandler = (pag: { pageSize: number; current: number }) => {
      state.pagination.current = pag.current;
      state.pagination.pageSize = pag.pageSize;
    };
    // 选中项变更
    const onSelectChange = (changableRowKeys: any[]) => {
      state.selectedRowKeys = changableRowKeys;
    };
    const rowSelection = computed(() => {
      return {
        selectedRowKeys: state.selectedRowKeys,
        fixed: true,
        onChange: onSelectChange,
      };
    });
    // 服务
    const $service = new firstLevelChannelService();
    // 表格节点
    const LTableRef = ref(null as any);
    const DetailRef = ref(null as any);
    const tableRow = (e: any) => {
      addRef.value.close();
      LTableRef.value.$fetchTableData();
    };
    return () => (
      <Page>
        <CardWithTitle title="一级渠道">
          {firstLevelChannelPageAuth()?.handler?.one_search?.mixin?.(
            <LTable
              ref={LTableRef}
              service={$service}
              authConfig={firstLevelChannelPageAuth()}
              toolbar={state.toolbar}
              v-model={state}
            >
              <a-table
                bordered={true}
                scroll={{ x: "max-content" }}
                dataSource={state.dataSource}
                columns={state.columns}
                pagination={state.pagination}
                onChange={tableChangeHandler}
                row-selection={rowSelection.value}
                loading={state.loading}
                rowKey="id"
                v-slots={{
                  bodyCell: ({ column, record }: any) => {
                    // // 操作栏
                    if (column.dataIndex === "operation") {
                      return (
                        <div class="operation">
                          {firstLevelChannelPageAuth()?.handler?.one_add
                            ?.hasAuth && (
                            <a-button
                              type="primary"
                              size="small"
                              v-slots={{
                                icon: () => <SearchOutlined />,
                              }}
                              onClick={() => {
                                navigator.push({ name: 'personalSecondaryChannelsPage', query: { pid: record.id} })
                              }}
                            >
                              查看二级渠道
                            </a-button>
                          )}
                          {firstLevelChannelPageAuth()?.handler?.one_edit
                            ?.hasAuth && (
                            <a-button
                              type="primary"
                              size="small"
                              v-slots={{
                                icon: () => <EditOutlined />,
                              }}
                              onClick={() => {
                                addRef.value.open({
                                  id: record.id,
                                });
                              }}
                            >
                              编辑
                            </a-button>
                          )}
                          {firstLevelChannelPageAuth()?.handler?.one_edit
                            ?.hasAuth && (
                            <a-button
                              type="primary"
                              size="small"
                              v-slots={{
                                icon: () => <EditOutlined />,
                              }}
                              onClick={() => {
                                $channelResetPassword({"id":record.id}).then((res:any)=>{
                                  message.success("重置密码成功,初始密码:123456");
                                }).catch(()=>{
                                  message.success("重置密码失败");
                                })
                              }}
                            >
                            重置密码
                            </a-button>
                          )}
                        </div>
                      );
                    }
                    if (column.dataIndex === "type") {
                      return record.type === 1 ? (
                        <div>出单机构</div>
                      ) : (
                        <div>推广机构</div>
                      );
                    }
                  },
                }}
              />
            </LTable>
          )}
        </CardWithTitle>
        {/* <Add
          ref={addRef}
          service={$service}
          onConfirm={(e)=>{
            tableRow(e);

          }}
        /> */}
      </Page>
    );
  },
});